<template>
	<div id="mse" style="width: 100%; height: 100%" ref="hlsEl">
		<div v-if="messageTip" class="text-red flex align-center">
			<el-icon size="24" class="mr8">
				<icon-tips-one theme="outline" />
			</el-icon>
			<p>{{ messageTip }}</p>
		</div>
	</div>
</template>

<script setup lang="ts">
import remoteLoad from '@/utils/remoteLoad'

const props = defineProps<{
	src: string
	height?: string
	poster?: string
}>()

const hlsEl = ref(null)
let play = null
const messageTip = ref('')
let url = props.src?.replaceAll('&amp;', '&')

const initMap = () => {
	if (url.includes('ezopen')) {
		messageTip.value = '播放地址不对，请更新后重新播放'
		return
	}
	if (props.src?.includes('.m3u8')) {
		play = new window.HlsJsPlayer({
			el: hlsEl.value,
			url: url,
			isLive: true,
			autoplay: true,
			playsinline: true,
			poster: props.poster,
			fitVideoSize: 'auto',
			fluid: true,
		})
	} else if (props.src?.includes('.flv')) {
		play = new window.FlvPlayer({
			el: hlsEl.value,
			url: url,
			isLive: true,
			autoplay: true,
			playsinline: true,
			poster: props.poster,
			// fitVideoSize: 'auto',
			fluid: true,
		})
	} else {
		play = new window.Player({
			el: hlsEl.value,
			url: props.src,
			autoplay: true,
			playsinline: true,
			poster: props.poster,
			fitVideoSize: 'auto',
			fluid: true,
		})
	}

	document.getElementById('mse').style.width = '100%'
}
onMounted(async () => {
	if (url.includes('.flv')) {
		if (window.FlvPlayer) {
			nextTick(() => {
				initMap()
			})
			return
		}
		await remoteLoad(`//unpkg.byted-static.com/xgplayer/2.31.6/browser/index.js`)
		await remoteLoad(`//unpkg.byted-static.com/xgplayer-flv/2.5.1/dist/index.min.js`)
	} else {
		if (window.HlsJsPlayer) {
			nextTick(() => {
				initMap()
			})
			return
		}
		await remoteLoad(`//unpkg.byted-static.com/xgplayer/2.31.6/browser/index.js`)
		await remoteLoad(`//unpkg.byted-static.com/xgplayer-hls.js/2.2.2/browser/index.js`)
	}
	initMap()
})

onUnmounted(() => {
	play && play.destroy(true)
	window.HlsJsPlayer = null
})
</script>

<style scoped></style>
